<!-- Dom模板 -->
<template>
  <div class="role">
    <!-- Dom内容 -->
    <div class="top">
      <div class="top_list">
        <p>
          <span>手机号</span>
          <el-input
            class="input"
            v-model="input"
            placeholder="请输入手机号"
          ></el-input>
        </p>
        <p>
          <span>角色</span>
          <select v-model="sel" @change="Role">
            <option>全部</option>
            <option>管理员</option>
            <option>店员</option>
          </select>
        </p>
      </div>
      <div class="top_list2">
        <button @click="Search">查询</button>
        <button @click="reset">重置</button>
        <button @click="addUser">添加</button>
      </div>
    </div>
    <Table
      :list="navList.slice((num - 1) * page, num * page)"
      :table-config="tableConfig"
      @Edit="handleEdit"
      @Delete="handleDelete"
    />
    <!-- <el-pagination
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next,sizes"
      :page-sizes="[8, 16]"
      :total="navList.length"
    >
    </el-pagination> -->
    <div class="page">
      <Paging
        :pageData="navList"
        :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange"
      />
    </div>
    <Alert v-if="alertFlag" :alertFlag="alertFlag" @close="close" />
    <Edit v-if="editFlag" :editFlag="editFlag" @close1="close1" />
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Paging from "@/components/paging/index.vue";
import Table from "@/components/table/index.vue";
import Alert from "./add/index.vue";
import Edit from "./edit/index.vue";
export default {
  name: "",
  components: {
    Alert,
    Edit,
    Table,
    Paging,
  },
  data() {
    return {
      msg: "测试",
      input: "",
      sel: "全部",
      navList: [],
      alertFlag: false,
      editFlag: false,
      page: 5,
      num: 1,
      tableConfig: {
        config: [
          {
            label: "用户名",
            prop: "name",
          },
          {
            label: "手机号",
            prop: "user",
          },
          {
            html: true,
            label: "角色",
            prop: "state",
            formatter: (row, column, cellValue) => {
              if (cellValue === "1") {
                return "管理员";
              } else if (cellValue === "2") {
                return "店员";
              }
            },
          },
          {
            label: "权限",
            prop: "state",
            formatter: (row, column, cellValue) => {
              if (cellValue === "1") {
                return "订单管理、角色设置、店铺设置";
              } else if (cellValue === "2") {
                return "订单管理";
              }
            },
            width: "250",
          },
          {
            label: "生成日期",
            prop: "tiem",
          },
          {
            label: "操作",
            shown: true,
            isEdit: true,
            isDel: true,
            isParticulars: false,
            isUndercarriage: false,
          },
        ],
      },
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.getNavList();
  },
  created() {},
  // Vue方法定义
  methods: {
    getNavList() {
      this.$store.dispatch("role/getNavList", {}).then((res) => {
        this.navList = res;
      });
      console.log(this.navList);
    },
    handleSizeChange(val) {
      this.page = val;
    },
    handleCurrentChange(val) {
      this.num = val;
    },
    handleEdit(item) {
      this.$store.commit("role/Edit", item);
      this.editFlag = true;
    },
    handleDelete(item) {
      console.log(item);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.$store.commit("role/delUser", item.ifID);
          location.reload();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addUser() {
      this.alertFlag = true;
    },
    close(flag) {
      this.alertFlag = flag;
    },
    close1(flag) {
      this.editFlag = flag;
    },
    reset() {
      location.reload();
    },
    Role() {
      this.$store.commit("role/Role", this.sel);
      this.navList = this.$store.state.role.sxList;
    },
    Search() {
      this.$store.commit("role/Search", this.input);
      this.navList = this.$store.state.role.Search;
      console.log(this.$store.state.role.Search);
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
* {
  font-size: 13px;
}
.role {
  padding: 0 20px;
  position: relative;
  width: 90%;
  overflow: hidden;
}
.top {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top_list {
  display: flex;
}
.top_list p:nth-child(1) {
  width: 148px;
  height: 30px;
  display: flex;
  align-items: center;
}
.top_list p:nth-child(2) {
  width: 148px;
  height: 30px;
  display: flex;
  align-items: center;
  margin-left: 50px;
}
.top_list p select {
  width: 100px;
  height: 30px;
  border: none;
  outline: none;
  padding-left: 5px;
}
.top_list p span {
  margin-right: 5px;
}
.top_list2 button {
  width: 70px;
  height: 30px;
  border: none;
  border-radius: 20px;
  margin-left: 20px;
}
.top_list2 button:nth-child(1) {
  background-color: #3ca1ff;
  color: white;
}
.top_list2 button:nth-child(2) {
  background-color: white;
}
.top_list2 button:nth-child(3) {
  background-color: white;
}
.span {
  color: #3ca1ff;
  margin-left: 10px;
}
.page {
  float: right;
  margin-top: 20px;
}
.table {
  min-height: 400px;
}
</style>
<style>
.input,
.input .el-input__inner {
  width: 95px;
  height: 30px;
  padding-left: 5px;
}
</style>